$(function() {
    //登入cookie
    $.ajax({
            type: "post",
            url: "http://121.4.102.44:8083/user/login",
            data: JSON.stringify({ phone: "13456788765", code: "123456" }),
            contentType: "application/json",
            success: function(res) {
                console.log("sho", res)
            }
        })
        //获取菜品分类
    function dishType() {
        $.ajax({
            method: 'get',
            url: '/category/list',
            success(res) {
                console.log(res)
                const divType = template('tpl-divType', res)
                $('.divType').html(divType)

                //浏览器打开默认点击第一个
                setTimeout(() => {
                    console.log('ok')
                    $('.divType li').eq(0).click()
                }, 10)
            }
        })
    }
    dishType()
        //点击渲染菜品
    let dataContainer = null
    $('.divType').on('click', 'li', function(e) {
            $(this).addClass('active').siblings().removeClass('active')
            const categoryId = $(this).attr('data-id')
            const urlType = $(this).attr('data-type')
                //判断菜品分类是套餐还是菜品
            let url = '/setmeal/list'
            if (urlType == 1) url = '/dish/list'

            // 获取菜品详细信息
            function divContainer() {
                $.ajax({
                    method: 'get',
                    url,
                    data: {
                        categoryId,
                        status: 1
                    },
                    success(res) {
                        dataContainer = res
                        res.data.forEach(item => {
                            if (!item.flavors) {
                                item.flavors = []
                            }
                        })
                        const divItem = template('tpl-divItem', res)
                        $('.divMenu div').html(divItem)

                    }
                })
                return dataContainer
            }
            divContainer()
        })
        //渲染购物车函数
    function shoppingCart() {
        $.ajax({
            method: 'get',
            url: '/shoppingCart/list',
            success(res) {

                $('.btnSubmitActive').off('click')
                let sum = 0
                let sumP = 0
                const shoppingCartStr = template('tpl-divCartItem', res)
                if (res.data.length == 0) {
                    $('.divCart div').eq(0).removeClass('imgCartActive').addClass('imgCart')
                    $('.divCart div').eq(4).removeClass('btnSubmitActive').addClass('btnSubmit')
                    $('.divGoodsNum').hide()
                    $('.btnSubmitActive').prop('disabled', true)
                    $('.divCart .divGoodsNum').html(sum)
                    $('.divCart .divNum span').eq(1).html(sumP)
                    $('.divCartContent').empty()
                    return
                } else {
                    $('.divCart div').eq(0).removeClass('imgCart').addClass('imgCartActive')
                    $('.divCart div').eq(4).removeClass('btnSubmit').addClass('btnSubmitActive')
                    $('.divGoodsNum').show()
                    $('.btnSubmitActive').prop('disabled', false)
                }
                $('.divCartContent').html(shoppingCartStr)
                res.data.map(item => {
                    sum += item.number
                    sumP += item.amount * item.number
                })

                $('.divCart .divGoodsNum').html(sum)
                $('.divCart .divNum span').eq(1).html(sumP)
                $('.btnSubmitActive').on('click', function() {
                    location.href = '/order.html'
                })

            }
        })
    }
    shoppingCart()
        //点击展开详细
    $('.divMenu').on('click', '.divItem', function(e) {
            $('.detailsDialog').remove()
            if ($(e.target).prop('id') == 'Sub' || $(e.target).prop('id') == 'Add' || $(e.target).prop('id') == 'type') return

            let index = $(this).index()
            let num = $(this).find('.divDishNum').html()
            console.log(num)
            const divContainerStr = template('tpl-divContainer', dataContainer.data[index])
            $('.app').append(divContainerStr)
            setTimeout(function() {
                $('.app .divContainer .divDishNum').html(num)

                console.log($('.app .divContainer .divDishNum'))

            }, 1000)

            $('.van-overlay').show()
            $('.detailsDialog').show()

        })
        //菜品点击选口味
    $('.divMenu').on('click', '.divTypes', function() {
        let index = $(this).parents('.divItem').index()
            //出来value的值改成数组
        dataContainer.data[index].flavors.forEach(v => {
            if (typeof(v.value) === 'object') return
            v.value = JSON.parse(v.value)

        })
        const dialogFlavorStr = template('tpl-dialogFlavor', dataContainer.data[index])
        $('.app').append(dialogFlavorStr)
    })

    $('.app').on('click', '.divContent>div span', function() {
        $(this).addClass('spanActive').siblings('span').removeClass('spanActive')

    })

    $('.app').on('click', '.dialogFlavor .addCar', function() {
            const length = $(this).attr('data-length')
            console.log(length)
            console.log($('.spanActive').length)
            if ($('.spanActive').length == length) {
                const dishFlavor = []
                $('.spanActive').each((index, ele) => {
                    dishFlavor.push($(ele).html())
                })
                console.log(dishFlavor.join(','))
                let data = {
                    amount: $(this).attr('data-price'),
                    name: $(this).attr('data-name'),
                    image: $(this).attr('data-img'),
                    dishId: $(this).attr('data-id'),
                    dishFlavor: dishFlavor.join(',')
                }
                $.ajax({
                    method: "POST",
                    url: '/shoppingCart/add',
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success(res) {
                        shoppingCart()
                        $('.divFlavorClose').click()

                    }

                })
            }


        })
        /* 相关动画 */
        //选择口味关闭
    $('.app').on('click', '.divFlavorClose', function() {
        $('.dialogFlavor').remove()
        $('.van-overlay').hide()
    })
    $('.app').on('click', '.detailsDialogClose', function() {
        $('.detailsDialog').remove()
        $('.van-overlay').hide()
    })
    $('.detailsDialogClose').on('click', function() {
            $('.van-overlay').hide()
            $('.detailsDialog').hide()
        })
        //购物车动画
    $('.imgCartActive').on('click', function() {
        $('.dialogCart').slideToggle()
        $('.van-overlay').toggle()

    })
    $('.van-overlay').on('click', function() {
            $('.dialogCart').slideUp()
            $('.detailsDialog').hide()
            $(this).hide()
        })
        /* 相关动画 */


    //清空购物车
    $('.clear').on('click', function() {
            $.ajax({
                method: 'delete',
                url: '/shoppingCart/clean',
                success(res) {
                    console.log(res)
                    shoppingCart()
                }
            })
            $('.divDishNum').html('0')
        })
        //购物车加按钮
    $('.divCartContent').on('click', '.divAdd', function() {
            const id = $(this).attr('data-dishId') || $(this).parents('.divCartItem').attr('data-setmealId')
            const data = {
                dishId: id,
                setmealId: id
            }
            $.ajax({
                method: 'post',
                url: '/shoppingCart/add',
                contentType: "application/json",
                data: JSON.stringify(data),
                success(res) {
                    console.log(res)
                    shoppingCart()
                }
            })
        })
        //购物车减按钮
    $('.divCartContent').on('click', '.divSubtract', function() {
            const id = $(this).siblings('.divAdd').attr('data-dishId') || $(this).parents('.divCartItem').attr('data-setmealId')
            const data = {
                dishId: id,
                setmealId: id
            }
            $.ajax({
                method: 'post',
                url: '/shoppingCart/sub',
                contentType: "application/json",
                data: JSON.stringify(data),
                success(res) {
                    console.log(res)
                    shoppingCart()
                }
            })
        })
        //加函数
    function add(that, data) {
        $.ajax({
            method: "POST",
            url: '/shoppingCart/add',
            contentType: "application/json",
            data: JSON.stringify(data),
            success(res) {
                shoppingCart()
                that.siblings('.divDishNum').html(res.data.number)
            }
        })
    }
    //减函数
    function sub(that, data) {
        $.ajax({
            method: "POST",
            url: '/shoppingCart/sub',
            contentType: "application/json",
            data: JSON.stringify(data),
            success(res) {
                shoppingCart()
                that.siblings('.divDishNum').html(res.data.number)

            }

        })
    }

    function pub(that) {
        const data = {
            amount: that.siblings('.divDishNum').attr('data-price'),
            name: that.siblings('.divDishNum').attr('data-name'),
            image: that.siblings('.divDishNum').attr('data-img'),
            dishId: that.siblings('.divDishNum').attr('data-id'),
        }
        return data
    }
    //菜单加
    $('.divMenu').on('click', '.divAdd', function(e) {
            const that = $(this)
            pub(that)
            add(that, pub(that))
        })
        //菜单减
    $('.divMenu').on('click', '.divSubtract', function(e) {
            const that = $(this)
            sub(that, pub(that))
        })
        //弹出层加
    $('.app').on('click', '.divAdd1', function(e) {
            const that = $(this)
            add(that, pub(that))
        })
        //弹出层减
    $('.app').on('click', '.divSubtract1', function(e) {
        const that = $(this)
        sub(that, pub(that))
    })


})